<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { useOrderStore } from '@/store/modules/order'
import { useUserStore } from '@/store/modules/user'

const $router = useRouter()
const orderStore = useOrderStore()
const { userOrderInfo, orderStatusArr } = storeToRefs(orderStore)

const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const patientId = ref<string>('')
const orderStatus = ref<string>('')

const userStore = useUserStore()
const { patientsAll } = storeToRefs(userStore)
// 获取就诊人列表
const fetchPatientAllAction = () => {
  userStore.fecthAllPatientsByUserAction()
}
// 获取订单状态列表
const fetchOrderStatus = () => {
  orderStore.fetchOrderStatusAction()
}
// 获取用户订单列表
const fetchUserOrderInfo = () => {
  const config = {
    page: currentPage.value,
    limit: pageSize.value,
    patientId: patientId.value,
    orderStatus: orderStatus.value
  }
  orderStore.fetchUserOrderListAction({ ...config })
}
const goOrderDedtail = (row: any) => {
  console.log(row)
  $router.push({
    path: '/user/order',
    query: {
      orderId: row.id
    }
  })
}
// changePatient
const changePatient = () => {
  fetchUserOrderInfo()
}
const changeOrderStatus = () => {
  fetchUserOrderInfo()
}
const currentPageHandle = (val: number) => {
  currentPage.value = val
  fetchUserOrderInfo()
}
const sizeChangeHandle = (val: number) => {
  pageSize.value = val
  fetchUserOrderInfo()
}
onMounted(() => {
  fetchPatientAllAction()
  fetchOrderStatus()
  fetchUserOrderInfo()
})
</script>
<template>
  <div class="order-lists">
    <custom-title-v1 title="挂号订单"></custom-title-v1>
    <!-- 就诊人,订单状态 -->
    <div class="search-box">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="就诊人">
          <el-select
            v-model="patientId"
            placeholder="全部就诊人"
            @change="changePatient"
          >
            <el-option label="全部就诊人" value=""></el-option>
            <template v-for="item in patientsAll" :key="item.id">
              <el-option :label="item.name" :value="item.id"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
            v-model="orderStatus"
            placeholder="全部订单"
            @change="changeOrderStatus"
          >
            <el-option label="全部订单" value=""></el-option>
            <template v-for="item in orderStatusArr" :key="item.status">
              <el-option :label="item.comment" :value="item.status"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="order-table">
      <el-table
        :data="userOrderInfo.records"
        style="width: 100%"
        border
        fit
        empty-text="暂无数据"
        header-row-class-name="headerTh"
      >
        <el-table-column type="index" width="50" align="center" />
        <el-table-column prop="reserveDate" label="就诊时间" align="center" />
        <el-table-column prop="hosname" label="医院" align="center" />
        <el-table-column prop="depname" label="科室" align="center" />
        <el-table-column prop="title" label="医生" align="center" />
        <el-table-column label="医事服务费" align="center">
          <template #default="{ row }"> {{ row.amount }}元 </template>
        </el-table-column>
        <el-table-column prop="patientName" label="就诊人" align="center" />
        <el-table-column
          prop="param.orderStatusString"
          label="订单状态"
          align="left"
        />
        <el-table-column label="操作" align="center" width="80">
          <template #default="{ row }">
            <el-button type="text" size="default" @click="goOrderDedtail(row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        class="pa"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 15]"
        background
        layout=" prev, pager, next, jumper,sizes,total"
        :total="userOrderInfo.total"
        @current-change="currentPageHandle"
        @size-change="sizeChangeHandle"
      />
    </div>
  </div>
</template>
<style scoped lang="less">
.order-lists {
  .search-box {
    margin: 20px 0;
  }
  .order-table {
    .headerTh {
      th {
        text-align: center;
      }
    }
  }
  .pagination {
    width: 100%;
    margin: 30px 0;
    display: flex;
    justify-self: center;
    .pa {
      width: 100%;
      justify-self: center;
    }
  }
}
</style>
